<template>
  <el-container  style="height:100%; border: 1px solid #eee">
    <el-aside width="40%">
      <el-row>
        <el-form label-width="80px" ref= "ruleForm" label-position="left" size="small" >
          <el-form-item label="车牌号码">
            <el-select v-model="selectedPlate" placeholder="请选择车牌号码" @change="selectPlateChange">
              <el-option
                v-for="item in selectPlatesOptions"
                :key="item.value"
                :label="item.text"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="选择时间">
            <el-col :span="12">
              <el-date-picker
                v-model="selectedStartTime"
                type="datetime"
                placeholder="选择开始时间">
              </el-date-picker>
            </el-col>
            <el-col :span="12">
              <el-date-picker
                v-model="selectedEndTime"
                type="datetime"
                placeholder="选择结束时间">
              </el-date-picker>
            </el-col>
          </el-form-item>
          <div class="filter-container">
            <el-button class="filter-item" type="primary" v-waves icon="el-icon-search" @click="handleFilter" size="small">搜索</el-button>
            <el-button class="filter-item" icon="el-icon-edit" @click="resetForm('ruleForm')" size="small">重置</el-button>
          </div>
          <!--<el-form-item label="回访速度">-->
            <!--<el-select v-model="selectedSpeedType" placeholder="请选择回访速度" @change="selectSpeedTypeChange">-->
              <!--<el-option-->
                <!--v-for="item in selectSpeedTypeOptions"-->
                <!--:key="item.value"-->
                <!--:label="item.text"-->
                <!--:value="item.value">-->
              <!--</el-option>-->
            <!--</el-select>-->
            <!--<span name="lable2">{{ lable2 }}</span>-->
          <!--</el-form-item>-->
          <!--<div class="filter-container">-->
            <!--<span name="lable3">{{ lable3 }}</span>-->
          <!--</div>-->
          <el-row>
          <el-tabs v-model="activeName" type="border-card" style='margin-top:15px;'>
            <el-tab-pane label="位置" name="first">
              <!--<el-row>-->
                <!--<div style="font-size:12px">-->
                  <!--<span name="lable1">过滤</span>-->
                  <!--<el-input style="width: 80px;" size="small"/>-->
                  <!--<span name="lable2">分钟间隔以下的数据</span>-->
                  <!--<el-button class="filter-item" type="primary" v-waves icon="el-icon-search" size="small" @click="handleSearch" >过滤</el-button>-->
                  <!--<el-button class="filter-item" v-waves icon="el-icon-search" size="small">导出</el-button>-->
                <!--</div>-->
              <!--</el-row>-->
              <el-row>
                <div style="margin-top: 5px">
                  <el-table ref="mainTable" :data="list" v-loading="listLoading" height="400"
                            element-loading-text="给我一点时间" border fit highlight-current-row
                            @selection-change="handleSelectionChange" @row-click="handleRowClick">
                    <el-table-column
                      type="selection"
                      width="30">
                    </el-table-column>
                    <el-table-column align="center" label="序号" width="55" type="index"/>
                    <el-table-column :key='index' width="180" align="center" v-for='(value,index) in formThead' :label="value.title">
                      <template slot-scope="scope">
                        {{scope.row[value.key]}}
                      </template>
                    </el-table-column>
                    <el-table-column align="center" label="操作" width="80" class-name="small-padding">
                      <template slot-scope="scope">
                        <el-button type="primary" size="mini" @click="handleCheck(scope.row)">定位</el-button>
                      </template>
                    </el-table-column>
                  </el-table>
                  <div style="margin-top: 5px">
                    <div v-show="!listLoading" class="pagination-container">
                      <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
                                     :current-page.sync="listQuery.current"
                                     :page-sizes="[10,20,30, 50]" :page-size="listQuery.size"
                                     layout="total, sizes, prev, pager, next, jumper" :total="total">
                      </el-pagination>
                    </div>
                  </div>
                </div>
              </el-row>
            </el-tab-pane>
          </el-tabs>
          </el-row>
        </el-form>
      </el-row>
    </el-aside>
    <el-container>
      <el-main style="padding-top: 0;padding-right: 10px">
        <el-row>
          <b-map-component ref="bmapComponent" style="margin-top: 5px" v-bind:data-info='resetDataInfo' v-bind:longitude="longitude" v-bind:latitude="latitude"></b-map-component>
        </el-row>
        <el-row>
          <div style="margin-top: 5px">
            <el-table ref="mainTableDetail" :data="listDetail" v-loading="listLoading1" height="150"
                      element-loading-text="给我一点时间" border fit highlight-current-row
                      @selection-change="handleSelectionChange" @row-click="handleRowClick">
              <el-table-column
                type="selection"
                width="55">
              </el-table-column>
              <el-table-column align="center" label="序号" width="65" type="index"/>
              <el-table-column :key='index' v-for='(value,index) in formDetail' width="150" align="center" :label="value.title">
                <template slot-scope="scope">
                  {{scope.row[value.key]}}
                </template>
              </el-table-column>
            </el-table>
            <div style="margin-top: 5px">
              <div v-show="!listLoading1" class="pagination-container">
                <el-pagination background @size-change="handlelSizeChange" @current-change="handlelCurrentChange"
                               :current-page.sync="listlockedQuery.current"
                               :page-sizes="[10,20,30, 50]" :page-size="listlockedQuery.size"
                               layout="total, sizes, prev, pager, next, jumper" :total="totalDetail">
                </el-pagination>
              </div>
            </div>
          </div>
        </el-row>
      </el-main>
    </el-container>
  </el-container>
</template>

<script type="text/ecmascript-6">
  import waves from '@/directive/waves' // 水波纹指令
  import BMapComponent from './components/BMapComponent'
  const MockData = require('^/data/monitorMock')

  const defaultFormThead = [
    { key: 'time', title: '跟踪时间' },
    { key: 'province', title: '所在省份' },
    { key: 'city', title: '所在城市' },
    { key: 'county', title: '所在区县' },
    { key: 'address', title: '详细地址' },
    { key: 'longitude', title: '经度' },
    { key: 'latitude', title: '纬度' }
  ]

  const defaultThead = [
    { key: 'plate', title: '车牌' },
    { key: 'trailerPlate', title: '挂车车牌' },
    { key: 'longitude', title: '经度' },
    { key: 'latitude', title: '纬度' },
    { key: 'altitude', title: '海拔' },
    { key: 'speed', title: '时速' },
    { key: 'stauts', title: '状态' },
    { key: 'rotate', title: '发动机转速' },
    { key: 'electric', title: '电池电量' },
    { key: 'oilmass', title: '剩余油量' },
    { key: 'mileage', title: '累计里程' }
  ]

  export default {
    name: 'monitor',
    components: { BMapComponent },
    directives: {
      waves
    },
    data() {
      return {
        list: null,
        listLoading: false,
        listLoading1: false,
        listDetail: null,
        total: null,
        totalDetail: null,
        formThead: defaultFormThead,
        formDetail: defaultThead,
        dataInfo: null,
        listQuery: {
          current: 1,
          size: 10,
          orderByField: '',
          condition: {
            plate: undefined
          }
        },
        listlockedQuery: {
          current: 1,
          size: 10,
          orderByField: '',
          condition: {
            plate: undefined
          }
        },
        selectPlatesOptions: null,
        selectSpeedTypeOptions: null,
        selectedPlate: '',
        selectedSpeedType: '',
        selectedStartTime: null,
        selectedEndTime: null,
        activeName: '',
        longitude: undefined,
        latitude: undefined,
        lable3: '',
        lable2: '',
        temp: {
          time: undefined,
          province: '',
          city: '',
          county: '',
          address: '',
          longitude: undefined,
          latitude: undefined
        }
      }
    },
    created() {
      this.selectedPlate = '粤BCQ939'
      this.selectedSpeedType = '1'
      this.getSelectPlatesptions()
      this.getSelectSpeedTypeOptions()
      this.activeName = 'first'
      this.lable3 = '48.98 km / 2108.59 km'
      this.lable2 = '播放速度：间隔10秒'
      let startTime = new Date()
      const endTime = new Date()
      startTime = startTime.getFullYear() + '.' + (startTime.getMonth()) + '.' + startTime.getDate()
      this.selectedStartTime = startTime
      this.selectedEndTime = endTime
      this.getList()
      this.initDataInfo()
      this.getDetailList()
    },
    computed: {
      // 计算属性的 getter
      resetDataInfo: function() {
        // `this` 指向 vm 实例
        return this.dataInfo
      }
    },
    methods: {
      getList() {
        this.listLoading = true
        const listOnLine = MockData.listOnLine
        const mockList = listOnLine.filter(item => {
          if (this.selectedPlate !== undefined) {
            if (item.plate !== this.selectedPlate) return false
          }
          const time = item.time.replace('/-/g', '/')
          const itemDate = new Date(time)
          if (this.selectedStartTime !== undefined) {
            if (itemDate <= this.selectedStartTime) return false
          }
          if (this.selectedEndTime !== undefined) {
            if (itemDate > this.selectedEndTime) return false
          }
          return true
        })
        const locationList = MockData.locationList
        const locations = locationList.filter(item => {
          if (this.selectedPlate !== undefined) {
            if (item.plate !== this.selectedPlate) return false
          }
          return true
        })
        const location = locations[0]
        this.longitude = location.longitude
        this.latitude = location.latitude
        this.list = mockList
        this.total = mockList.length
        this.listLoading = false
      },
      getDetailList() {
        this.listLoading1 = true
        const listOnLine1 = MockData.vechileList
        const mockList1 = listOnLine1.filter(item => {
          if (this.selectedPlate !== undefined) {
            if (item.plate !== this.selectedPlate) return false
          }
          return true
        })
        this.listDetail = mockList1
        this.totalDetail = mockList1.length
        this.listLoading1 = false
      },
      handleRowClick(row, event, column) {
        this.selectedId = row.id
      },
      handleCheck(row) {
        const longitude = row.longitude
        const latitude = row.latitude
        const stayTime = row.stayTime
        const address = row.address
        const status = location.status === 'K' ? '空载' : location.status === 'H' ? '半载' : '重载'
        let content = '当前位置：' + address + '<br>'
        content += '经度：' + longitude + '<br>'
        content += '纬度：' + latitude + '<br>'
        content += '停留时间：' + stayTime + '<br>'
        content += '状态: ' + status

        this.$refs['bmapComponent'].openTips(longitude, latitude, content)
      },
      handleSelectionChange(val) {
        this.multipleSelection = val
      },
      getSelectPlatesptions() {
        this.selectPlatesOptions = [{ value: '赣H97005', text: '赣H97005' },
          { value: '赣H80893', text: '赣H80893' },
          { value: '赣AG1160', text: '赣AG1160' },
          { value: '赣AG1182', text: '赣AG1182' },
          { value: '粤BCQ939', text: '粤BCQ939' },
          { value: '赣H33667', text: '赣H33667' },
          { value: '赣A78171', text: '赣A78171' },
          { value: '粤BCQ999', text: '粤BCQ999' },
          { value: '赣A32533', text: '赣A32533' },
          { value: '冀DX2373', text: '冀DX2373' }
        ]
      },
      selectPlateChange(value) {
        this.selectedPlate = value
      },
      getSelectSpeedTypeOptions() {
        this.selectSpeedTypeOptions = [{ value: '1', text: '快速' }, { value: '2', text: '正常' }, { value: '3', text: '慢速' }]
      },
      handleFilter() {
        this.getList()
        this.initDataInfo()
        this.getDetailList()
        this.$refs['bmapComponent'].init(this.dataInfo, this.longitude, this.latitude)
      },
      initDataInfo() {
        const array = []
        const dataList = this.list
        for (let i = 0; i < dataList.length; i++) {
          const location = dataList[i]
          const arrayDetail = []
          const status = location.status === 'K' ? '空载' : location.status === 'H' ? '半载' : '重载'
          arrayDetail.push(location.longitude)
          arrayDetail.push(location.latitude)
          let content = '当前位置：' + location.address + '<br>'
          content += '经度：' + location.longitude + '<br>'
          content += '纬度：' + location.latitude + '<br>'
          content += '停留时间：' + location.stayTime + '<br>'
          content += '状态: ' + status
          arrayDetail.push(content)
          arrayDetail.push(location.status)
          array.push(arrayDetail)
        }
        this.dataInfo = array
      },
      handleSizeChange(val) {
        this.listQuery.size = val
        this.getList()
      },
      handleCurrentChange(val) {
        this.listQuery.current = val
        this.getList()
      },
      handlelSizeChange(val) {
        this.listlockedQuery.size = val
        this.getList()
      },
      handlelCurrentChange(val) {
        this.listlockedQuery.current = val
        this.getList()
      },
      resetForm(formName) {
        this.$refs[formName].resetFields()
      }
    }
  }
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
  $bg:#2d3a4b;
  $light_gray:#eee;

  .el-aside {
    background-color: rgb(238, 241, 246);
    color: #333;
    text-align: left;
  }

  .el-form{
    margin: 20px 0px 10px 10px;
  }

  .el-table {
    font-size: 10px;
  }

  .el-main {
    background-color: $light_gray;
    color: #333;
    text-align: left;
  }

  .el-tabs {
    color: #333;
    text-align: left;
  }

</style>

